<script setup lang="ts">
import { ref, watch } from 'vue'
import request from '../utils/request'
import type { TarticlesApi, TarticlesItem } from '../types/index'
const props = defineProps<{
  currId: number
}>()
// const stop=watch(需要侦听的数据（基本响应式数据，[],响应式数据中的某个属性:()=>响应式数据.属性）,()=>{},{
//   deep,immediate,flush:  pre:渲染前调用回调，post:渲染后执行回调，sync:修改一次调用一次回调，都是在渲染前
// })
const list = ref<TarticlesItem>([])
const getData = async () => {
  const res = await request<any, TarticlesApi>({
    url: `/articles?channel_id=${props.currId}&timestamp=${Date.now()}`
  })
  list.value = res.data.results
  console.log('列表数据', res.data.results[0].cover)
}
watch(
  () => props.currId,
  () => {
    getData()
  }
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in list" :key="i.art_id">
      <p class="title">
        {{ i.title }}
      </p>
      <img
        v-for="(item, index) in i.cover.images"
        :key="index"
        class="img"
        :src="item"
        alt=""
      />

      <div class="info">
        <span>{{ i.aut_name }}</span>
        <span>{{ i.comm_count }}评论</span>
        <span>{{ i.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
